const { WeaSelect,WeaInputSearch,WeaNewScroll } = ecCom;
const { Carousel } = antd;
const {inject, observer} = mobxReact;
const {toJS} = mobx;

@inject('protalElementStore','listStore')
@observer
// 元素显示组件
class Head extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabSelectedKey: "0",
      searchSwitch:false,
      placeholder:'输入流程',
      inputValue:"",
      options: [
        {
          key: "1",
          selected: true,
          showname: "按流程状态"
        }
   //     ,
    //    {
    //      key: "2",
    //      selected: false,
    //      showname: "按异构类型",
    //    },
    //    {
    //      key: "3",
    //      selected: false,
    //      showname: "按流程类型"
    //    }
      ],
    };
  }
  componentDidMount() {
    this.setCss();
    const { listStore } = this.props;
    listStore.doInit();
  }
  onSearch(value){
    const { listStore } = this.props;
    const { topTab,optionsValue,param,tab } = listStore;    
    const { tabSelectedKey } = this.state;
    
    var params = param;
    params.requestname = value;
    listStore.splitPageKey(params);
  }
  render() {
    const { protalElementStore,listStore } = this.props;
    const { value,tabSelectedKey,placeholder,inputValue,options,searchSwitch } = this.state;    
    const { topTab,optionsValue,param,tab,topTabCount } = listStore;    
    
    return (
      <div className='TopElement flex justify-between flex-1 mb-1' style={{background:config.headBackColor}}>
        <div className='select flex-layout-1'>
          <WeaSelect
            options={options}
            value={optionsValue}
            viewAttr={2}
            onChange={(v, showname) => {
              const { protalElementStore,listStore } = this.props;
              this.setState({ tabSelectedKey: 0 });
              listStore.paramChoose(v,0);
            }}
          />
        </div>
        <div className='tab flex-layout-5 overflow-hidden'>
          <WeaTab
            datas={tab}
            counts={topTabCount}
            keyParam="viewcondition" //主键
            selectedKey={tabSelectedKey}
            countParam="groupid" //数量
            onChange={v => {
              const { listStore } = this.props;
              this.setState({ tabSelectedKey: v });
              listStore.paramChoose(optionsValue,v);
            }}
            style={{borderBottom:0,width:'100%'}}
          />
        </div>
        <div className='search flex-layout-2 pr-2  text-right'
          onMouseEnter={()=> this.setState({searchSwitch:true}) }
          onMouseLeave={()=> this.setState({searchSwitch:false}) }
        >
          {
            !searchSwitch?
              <p className='searchButton cursor-pointer' style={{display:config.isSearch?'inlineBlock':'none'}}>
                <svg className='align-middle' t="1670402501678" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2654" width="13" height="13"><path d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z" fill="#718096" p-id="2655"></path></svg>
                <span className='align-middle text-gray-600 ml-2'>搜索</span>
              </p>
            :
              <WeaInputSearch
                value={inputValue}
                style={{width:'100%',height: '40px',lineHeight: '36px',background:config.headBackColor,display:config.isSearch?'inlineBlock':'none'}}
                placeholder={placeholder}
                onSearch={(v)=>{this.setState({inputValue:v});this.onSearch(v)}}
                onChange={(v)=>{
                  if(v==''){
                  this.setState({inputValue:v});
                  this.onSearch(v);
                }}}
              />
          }

        </div>        
      </div>
    );    
  }
  setCss = ()=>{
    const css = this.getCss() ;
    jQuery(jQuery('head')[0]).append('<style id="theme-style" type="text/css">' + css + '</style>');
  }  
  getCss = () => {
    const css = [];
    css.push(`.wea-tab .ant-tabs-ink-bar{background-color:${config.fontColor}}`);    
    css.push(`.ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-inner{color:${config.fontColor}}`);
    return css.join('');
  };   
}

ecodeSDK.exp(Head);
